<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>收货地址</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>		
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			header {
				padding: 15px 20px 5px 20px; 
				background-color: red;
				color: white;
				margin-top: 0px;
			}
			
			#cell-style {
				margin-top: 10px;
			}
			
			#button {
				padding: 0 18px 0 18px;
				text-align: center;
				margin-top: 30px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="5" >
						<span @click="goBack"><返回</span>
					</van-col>
					<van-col span="15">
						收货地址
					</van-col>
					<van-col span="4">
						<span @click="deletes(this)">删除</span>
					</van-col>
				</van-row>
			</header>
			<!--头部结束-->

			<section>
				
				<van-address-list
				  v-model="chosenAddressId"
				  :list="list"				  
				  @add="onAdd"
				  @edit="onEdit"
				  @select="onSelect"
				></van-address-list>
			</section>

			<footer>
			</footer>
		</div>
		<script type="text/javascript">
			
			var vm = new Vue({
				el: "#app",
				data: {
					key:"",
					chosenAddressId: "",
					list:"" ,
					
				},
				mounted(){
					var _this=this;
					if (localStorage.getItem("keys") != null) {
						_this.key = localStorage.getItem("keys");
					}
					ajax({
						url:"http://dsapi.ysd3g.com/API/MyShippingAddressList",
						data:{
							key:_this.key
						},
						dataType:"jsonp",
						success: function(res) {								
							if (res.Error == false) {								
								vm.list=res.Data;								
							} else {
								vm.show=true;
								console.log(res.key);
								vm.$toast.fail(res.Msg);
							}
						}
					})
					
				},
				methods:{
					onSelect(){
						var _this=this;
						console.log(_this.chosenAddressId);
						vm.chosenAddressId=_this.chosenAddressId;
					},
					goBack:function(){
						plus.webview.currentWebview();
						plus.webview.close("shipping","slide-out-right")
					},
					onAdd() {
					  plus.webview.create("newshipping.html","newshipping");
					  plus.webview.show("newshipping","slide-in-right")
					},
					onEdit(item, index) {
					  vm.$toast('编辑地址:' + index+",id:"+vm.list[index].id);					  
					},
					deletes(index){
						//删除收获地址.
						if(vm.chosenAddressId==""){
							vm.$dialog.alert({
							  message: '请先选中要删除的地址'
							}).then(() => {
							  // on close
							});
							return;
						}else{
							vm.$dialog.confirm({							 
							  message: '确认删除吗'
							}).then(() => {  //点击确认后
							  ajax({
							  	url:"http://dsapi.ysd3g.com/api/DeleteShippingAddress",
							  	data:{
							  		key:vm.key,
							  		addressId:vm.chosenAddressId
							  	},
							  	dataType:"jsonp",
							  	success: function(res) {								
							  		if (res.Error == false) {							  			
										var arr=vm.$toast("删除成功");
										setTimeout(()=>{
											arr;
											var user=plus.webview.getWebviewById("shipping");//刷新列表 
											user.reload(true);//刷新列表页面	
										},400)
							  		} else {
							  			console.log(res.key);
							  			vm.$toast.fail(res.Msg);
							  		}
							  	}
							  })
							}).catch(() => {
							  vm.$toast("取消删除");
							});
						}						
					}

				}
			})
		</script>
	</body>

</html>